<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        *{margin: 0;padding: 0}
        .container{
            position: relative;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        .handle{
            width: 120px;
            height: 200px;
            position: absolute;
            left: 37%;
            transform: rotate(-30deg);       
            transform-origin: 30px 30px;   /* 旋转中心点 */
        }
        .pan{
            width: 300px;
            height: 300px;
            position: absolute;
            top: 130px;
            left: 125px;   
        }
        .play{
            animation-play-state: running;
            animation: play 2s linear infinite; 
        }
        .unplay{
            animation-play-state: paused;
        }
        @keyframes move{
            0%{
                transform:rotate(-30deg)
            }
            100%{
                transform: rotate(0deg)
            }
        }
        @keyframes unmove{
            0%{
                transform: rotate(0deg)
            }
            100%{
                transform: rotate(-30deg)
            }
        }
      @keyframes play{
        0%{
                transform: rotate(360deg)
               
            }
      }
      @keyframes unplay{
          0%{
              transition: rotate(0deg)
          }
      }
        /* animation-fill-mode:forwards;
        backwards:动画结束时会回到开始位置
            forwards：动画会在结束位置停止
         */
        .move{
            animation: move 2s forwards;
        }
        .unmove{
            animation: unmove 2s forwards;
        }
    </style>
</head>
<body>
  
    <div class="container">
        <img class="pan " src="images/pan.png" alt="">
        <img class="handle " src="images/shou.png" alt="">
    </div>
    <script>
        var isPlay=false;
        $(".pan").click(function(){
            isPlay=!isPlay;
            if(isPlay){
                $(".handle").addClass("move").removeClass("unmove");
                $(".pan").addClass("play").removeClass("unplay")
            }else{
                $(".handle").removeClass("move").addClass("unmove");
                $(".pan").removeClass("play").addClass("unplay")
            }
        })
        
    </script>
</body>
</html>